<template>
  <div class="tool-bar can-not-select">
    <div class="tool-start">
      <!-- qq表情 -->
      <el-popover placement="top-start" width="400" trigger="hover">
        <div class="scroll" style="height: 210px; overflow-y: scroll">
          <img class="qq-face" src="expression/qqface.png" usemap="#qqMap" />
          <map name="qqMap">
            <area
              v-for="(expression, index) in 105"
              :key="index"
              shape="rect"
              :coords="
                (index % 15) * 25 +
                ', ' +
                parseInt(index / 15) * 25 +
                ', ' +
                ((index % 15) + 1) * 25 +
                ', ' +
                (parseInt(index / 15) + 1) * 25
              "
              :title="expressionMap[index]"
              @click="selectExpression(index)"
            />
          </map>
          <img src="expression/emoji.png" usemap="#emojiMap" />
          <map name="emojiMap">
            <area
              v-for="(emoji, index) in 177"
              :key="index"
              shape="rect"
              :coords="
                (index % 15) * 25 +
                ', ' +
                parseInt(index / 15) * 25 +
                ', ' +
                ((index % 15) + 1) * 25 +
                ', ' +
                (parseInt(index / 15) + 1) * 25
              "
              :title="expressionMap[105 + index]"
              @click="selectExpression(105 + index)"
            />
          </map>
        </div>
        <div slot="reference" class="tool" title="表情">
          <img
            class="icon"
            src="../../../assets/svg/tool-bar-expression.svg"
            alt
          />
        </div>
      </el-popover>
      <!-- 发图片|视频|文件 -->
      <div class="tool" title="发送文件">
        <label class="label" for="sendFiles">
          <img class="icon" src="../../../assets/svg/tool-bar-files.svg" alt />
        </label>
        <input
          v-show="false"
          type="file"
          id="sendFiles"
          accept=".txt, .doc, .xls, .ppt, .docx, .xlsx, .pptx, .rar, .zip, .exe, .text, .apk, .mp3, .jpg, .png, .gif, .jpeg, .mp4"
          ref="toolsFile"
          @change="choseMedia('File')"
        />
      </div>
      <!-- 剪切 -->
      <div class="tool" title="截图" @click="shearScreen()">
        <img class="icon" src="../../../assets/svg/tool-bar-shear.svg" alt />
      </div>
      <!-- 发语音 -->
      <div v-if="hasCurrentFriend" class="tool" title="发语音">
        <label class="label" for="sendVoiceId">
          <img class="icon" src="../../../assets/svg/tool-bar-voice.svg" alt />
        </label>
        <input
          v-show="false"
          type="file"
          id="sendVoiceId"
          accept=".amr, .mp3"
          ref="toolsVoice"
          @change="choseMedia('Voice')"
        />
      </div>
      <!-- 发名片 -->
      <div
        v-if="hasCurrentFriend"
        class="tool"
        title="发名片"
        @click="showSendNameCard"
      >
        <img
          class="icon"
          src="../../../assets/svg/tool-bar-name-card.svg"
          alt
        />
      </div>
      <!-- 发红包 -->
      <div
        v-if="hasCurrentFriend"
        class="tool"
        title="发红包"
        @click="showRedEnvelopeDialog"
      >
        <img
          class="icon"
          src="../../../assets/svg/tool-bar-red-envelopes.svg"
          alt
        />
      </div>
      <!-- 二维码 -->
      <div
        v-if="hasCurrentFriend"
        class="tool"
        title="二维码"
        @click="showQrCode"
      >
        <img
          class="icon"
          src="../../../assets/svg/tool-bar-qr-code-wx.svg"
          alt
        />
      </div>
      <!-- 清空该好友的聊天记录 -->
      <div
        v-if="hasCurrentFriend"
        class="tool"
        title="清空聊天资料"
        @click="clearFriendChats"
      >
        <img
          class="icon"
          src="../../../assets/svg/tool-bar-clear-data.svg"
          alt
        />
      </div>
      <!-- 发小程序 -->
      <div
        v-if="hasCurrentFriend"
        class="tool"
        title="发小程序"
        @click="showWeAppDialog"
      >
        <img class="icon" src="../../../assets/svg/tool-bar-applet.svg" alt />
      </div>
      <!-- 发链接 -->
      <div
        v-if="hasCurrentFriend"
        class="tool"
        title="发链接"
        @click="showLinkDialog"
      >
        <img class="icon" src="../../../assets/svg/tool-bar-link.svg" alt />
      </div>
      <!-- 转账 -->
      <div
        v-if="currentFriend.FriendId"
        class="tool"
        title="转账"
        @click="showTransferMoneyDialog"
      >
        <img
          class="icon"
          src="../../../assets/svg/tool-bar-transfer-money.svg"
          alt
        />
      </div>
      <!-- 群二维码 -->
      <div
        v-if="currentFriend.UserName"
        title="群二维码"
        class="tool"
        @click="showChatRoomQrCode"
      >
        <img class="icon" src="../../../assets/svg/tool-bar-qr-room.svg" alt />
      </div>
      <!-- 公众号 -->
      <div
        v-if="currentWeChatId"
        title="获取公众号"
        class="tool"
        @click="showGH"
      >
        <img class="icon" src="../../../assets/svg/tool-bar-gh.svg" alt />
      </div>
      <!-- 历史消息 -->
      <!-- <div class="tool" @click="getHistory()" title="历史消息">
        <i class="fa fa-history" aria-hidden="true"></i>
      </div>-->
    </div>

    <div class="tool-end">
      <!-- 任务面板 -->
      <div class="tool" @click="showTaskList()" title="任务面板">
        <img class="icon" src="../../../assets/svg/too-bar-renwu.svg" alt />
      </div>
      <!-- 历史消息 -->
      <div class="tool" @click="showMsgHistory()" title="历史消息">
        <img class="icon" src="../../../assets/svg/tool-bar-history.svg" alt />
      </div>
      <!-- 创建群聊 -->
      <div class="tool" @click="createChatRoom()" title="创建群">
        <img
          class="icon"
          src="../../../assets/svg/tool-bar-create-room.svg"
          alt
        />
      </div>
      <!-- 快捷语 -->
      <!-- <div class="tool" title="快捷语" @click="replyDrawerVisiable = true">
        <img class="icon" src="../../../assets/svg/tool-bar-reply.svg" alt />
      </div>-->
      <!-- 快捷语 -->
      <div
        class="tool"
        :title="currentFriend.UserName ? '群管理' : '好友管理'"
        @click="managerVisiable = !managerVisiable"
      >
        <img class="icon" src="../../../assets/svg/tool-bar-manager.svg" alt />
      </div>
      <!-- 朋友圈 -->
      <div class="tool" title="朋友圈" @click="showFriendCircle()">
        <img
          class="icon"
          src="../../../assets/svg/tool-bar-friend-cirlce.svg"
          alt
        />
      </div>
    </div>

    <!-- 创建群聊弹框 -->
    <SlotFriends
      v-if="friendsDialogVisible"
      :dialogTilte="dialogTilte"
      :action="action"
      :dialogData="dialogData"
      :currentFriend="currentFriend"
      :friends="dialogData"
      :friendsDialogVisible="friendsDialogVisible"
      @closeSlotFriends="friendsDialogVisible = false"
    ></SlotFriends>

    <!-- 二维码弹框 -->
    <el-dialog
      class="qr-code-dialog"
      :title="dialogTilte"
      :visible.sync="qrCodeDialog"
    >
      <el-image class="qr-code-img" :src="qrCode['QrCodeUrl']" fit="scale-down">
        <div slot="error" class="image-slot">
          <i style="font-size: 100px" class="el-icon-picture-outline"></i>
        </div>
      </el-image>
      <el-row
        class="created-time"
        type="flex"
        justify="center"
        align="middle"
        style="min-height = 30px;"
      >
        <span
          v-if="qrCode.ModifyTime"
          v-text="$options.filters.timeFilter(qrCode['ModifyTime'])"
        ></span>
        <el-button
          type="primary"
          style="padding: 5px; margin-left: 10px"
          size="small"
          @click="pullWeChatQrCodeTask"
          >刷新</el-button
        >
      </el-row>
    </el-dialog>

    <!-- 群聊二维码弹框 -->
    <el-dialog
      class="qr-code-dialog"
      :title="dialogTilte"
      :visible.sync="chatRoomQrCodeDialog"
    >
      <el-image
        class="qr-code-img"
        :src="chatRoomQrCode['QrCodeUrl']"
        fit="scale-down"
      >
        <div slot="error" class="image-slot">
          <i style="font-size: 100px" class="el-icon-picture-outline"></i>
        </div>
      </el-image>
      <el-row
        class="created-time"
        type="flex"
        justify="center"
        align="middle"
        style="min-height = 30px;"
      >
        <span
          v-if="chatRoomQrCode.ModifyTime"
          v-text="$options.filters.timeFilter(chatRoomQrCode['ModifyTime'])"
        ></span>
        <el-button
          type="primary"
          style="padding: 5px; margin-left: 10px"
          size="small"
          @click="pullChatRoomQrCodeTask"
          >刷新</el-button
        >
      </el-row>
    </el-dialog>

    <!-- 发红包弹框 -->
    <el-dialog
      class="red-envelope"
      :title="dialogTilte"
      :visible.sync="redEnvelopeDialog"
      :before-close="resetRedForm"
    >
      <el-form
        :model="redForm"
        :rules="rules"
        ref="redEnvelope"
        label-width="80px"
      >
        <el-form-item label="单个金额" prop="money">
          <el-input v-model="redForm.money" clearable></el-input>
        </el-form-item>
        <el-form-item
          v-if="currentFriend.UserName"
          label="红包个数"
          prop="number"
        >
          <el-input v-model="redForm.number" clearable></el-input>
        </el-form-item>
        <el-form-item label="祝福语" prop="blessings">
          <el-input
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 4 }"
            maxlength="50"
            placeholder="请输入内容"
            v-model="redForm.blessings"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            type="password"
            v-model="redForm.password"
            autocomplete="off"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item>
          <span class="show-money">￥{{ redForm.money }}分</span>
        </el-form-item>
        <el-form-item>
          <el-button type="danger" @click="sendLuckyMoneyTask()"
            >塞钱进红包</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 转账弹框 -->
    <el-dialog
      class="red-envelope"
      :title="dialogTilte"
      :visible.sync="transferMoneyDialog"
      :before-close="resetRemittanceForm"
    >
      <el-form
        :model="remittanceForm"
        :rules="rules"
        ref="transferMoney"
        label-width="80px"
      >
        <el-form-item label="转账金额" prop="money">
          <el-input v-model="remittanceForm.money" clearable></el-input>
        </el-form-item>
        <el-form-item label="转账说明" prop="memo">
          <el-input
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 4 }"
            maxlength="50"
            placeholder="请输入内容"
            v-model="remittanceForm.memo"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            type="password"
            v-model="remittanceForm.password"
            autocomplete="off"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item>
          <span class="show-money">￥{{ remittanceForm.money }}分</span>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="remittanceTask()">转账</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 发小程序弹框 -->
    <el-dialog
      class="we-app"
      :title="dialogTilte"
      :visible.sync="wechatAppDialog"
    >
      <el-form
        :model="weapp"
        :rules="weappRules"
        ref="weappDialog"
        label-width="110px"
      >
        <el-form-item
          :label="index"
          :prop="index"
          v-for="(wa, index) in weapp"
          :key="'weapp' + index"
        >
          <el-input v-model="weapp[index]" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            size="medium"
            @click="sendWeApp('weappDialog')"
            >发送</el-button
          >
          <el-button type="info" size="medium" @click="resetForm('weappDialog')"
            >重置</el-button
          >
          <el-button type="primary" size="medium" @click="choseWeApp">
            从库中选
            <i class="el-icon-upload el-icon--right"></i>
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 发链接弹框 -->
    <el-dialog class="we-app" :title="dialogTilte" :visible.sync="linkDialog">
      <el-form
        :model="linkForm"
        :rules="linkRules"
        ref="linkDialog"
        label-width="110px"
      >
        <el-form-item
          :label="index"
          :prop="index"
          v-for="(wa, index) in linkForm"
          :key="'link' + index"
        >
          <el-input
            v-model="linkForm[index]"
            :disabled="index === 'TypeStr'"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            size="medium"
            @click="sendLink('linkDialog')"
            >发送</el-button
          >
          <el-button type="info" size="medium" @click="resetForm('linkDialog')"
            >重置</el-button
          >
          <el-button type="primary" size="medium" @click="choseWeApp">
            从库中选
            <i class="el-icon-upload el-icon--right"></i>
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 公众号弹框 -->
    <el-dialog class="gh-dialog" :title="dialogTilte" :visible.sync="ghDialog">
      <el-table :data="ghList" height="100%">
        <el-table-column label="Icon" width="100" align="center">
          <template slot-scope="scope">
            <el-avatar
              shape="square"
              :size="80"
              fit="cover"
              :src="scope.row.Icon"
            ></el-avatar>
          </template>
        </el-table-column>
        <el-table-column
          prop="Alias"
          label="Alias"
          width="120"
          align="center"
        ></el-table-column>
        <el-table-column prop="Nickname" label="Nickname"></el-table-column>
        <el-table-column prop="Username" label="Username"></el-table-column>
        <el-table-column label="操作" width="100" align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="medium"
              icon="el-icon-position"
              @click.native.prevent="seeGH(scope.row)"
              >查看消息</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <!-- 快捷语 -->
    <!-- <el-drawer
      title="我是标题"
      class="reply-drawer"
      :visible.sync="replyDrawerVisiable"
      :with-header="false"
    >
      <fast-reply></fast-reply>
    </el-drawer>-->

    <!-- 好友打标签|群管理 -->
    <el-drawer
      :modal="false"
      :append-to-body="true"
      :title="currentFriend.UserName ? '群管理' : '设置备注和标签'"
      class="manager-drawer"
      custom-class="manager-drawer"
      :visible.sync="managerVisiable"
    >
      <!-- <label-manager></label-manager> -->
      <chat-room-manager
        v-if="currentFriend.UserName"
        :currentFriend="currentFriend"
      ></chat-room-manager>
      <label-remark :currentFriend="currentFriend" v-else></label-remark>
    </el-drawer>

    <!-- 朋友圈 -->
    <el-drawer
      title="我是标题"
      class="circle-drawer"
      destroy-on-close
      direction="ttb"
      :visible.sync="circleDrawerVisiable"
      :with-header="false"
    >
      <friend-circle :currentFriend="currentFriend"></friend-circle>
    </el-drawer>

    <el-dialog
      title="任务完成明细(近3天)"
      :visible.sync="taskPanelDialog"
      width="1200px"
      style="height: 80%"
      top="10%"
      append-to-body
    >
      <el-table
        ref="displayForm"
        :data="taskDetailManager"
        height="400px"
        @cell-dblclick="chooseTableClick"
      >
        <el-table-column label="任务编号" align="center" prop="taskId" />
        <el-table-column
          label="发布时间"
          align="center"
          width="150px"
          prop="pandaTask.tastDate"
          :formatter="parseTime"
        >
        </el-table-column>
        <el-table-column
          label="任务名称"
          align="center"
          prop="pandaTask.taskName"
        />
        <el-table-column
          label="产品名称"
          align="center"
          prop="pandaTask.productName"
        />
        <el-table-column label="旺旺号" align="center" prop="buyerNick" />
        <el-table-column label="价格" align="center" prop="pandaTask.price" />
        <el-table-column
          label="当日/预留"
          align="center"
          prop="tradingType"
          :formatter="tradingTypeType"
        />
        <el-table-column
          label="评价单"
          align="center"
          prop="orderType"
          :formatter="orderTypeType"
        />
        <el-table-column
          label="返款渠道"
          align="center"
          prop="rebatesChannel"
          :formatter="rebatesChannelType"
        />
        <el-table-column label="返款信息" align="center" prop="">
          <template slot-scope="scope">
            <div v-html="showRebatesWay(scope.row)"></div>
          </template>
        </el-table-column>
        <el-table-column
          label="返款责任人"
          align="center"
          prop="rebatesUserName"
        />
        <el-table-column
          label="返款状态"
          align="center"
          prop="rebatesStatus"
          :formatter="rebatesStatusFormat"
        />
        <el-table-column
          label="订单状态"
          align="center"
          prop="status"
          :formatter="taskDetailFormat"
        />
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
          width="150px"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="chooseTableClick(scope.row)"
              >修 改</el-button
            >
            <el-button
              v-if="scope.row.status < 2"
              size="mini"
              type="text"
              @click="chehuiTask(scope.row)"
              >撤回任务</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import SlotFriends from "../SlotFriends";
import LabelRemark from "../record/LabelRemark";

import ChatRoomManager from "../record/ChatRoomManager";

// import FastReply from '../record/FastReply'
import FriendCircle from "../record/FriendCircle";
// import html2canvas from 'html2canvas';
import fileUpload from "../record/fileUpload";

export default {
  data() {
    let checkMoney = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("金额不能为空"));
      }
      value = Number(value);
      if (!Number.isInteger(value)) {
        callback(new Error("请输入数字值"));
      } else {
        if (value < 0) {
          callback(new Error("必须大于0"));
        } else if (value > 20000) {
          callback(new Error("必须小于20000"));
        } else if (parseInt(value / this.redForm.number) < 1) {
          // 单个红包金额不可低于0.01
          callback(new Error("单个红包金额不可低于0.01元！"));
        } else {
          callback();
        }
      }
    };
    let checkNumber = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("数量不能为空"));
      }
      value = Number(value);
      if (!Number.isInteger(value)) {
        callback(new Error("请输入数字值"));
      } else {
        if (value < 0) {
          callback(new Error("必须大于0"));
        } else if (value > 20000) {
          callback(new Error("必须小于100"));
        } else if (parseInt(this.redForm.money / value) < 1) {
          // 单个红包金额不可低于0.01
          callback(new Error("单个红包金额不可低于0.01元！"));
        } else {
          callback();
        }
      }
    };
    return {
      // 任务修改弹出框
      taskModifyBox: false,
      imageUrls: [],
      taskListData: [
        { name: 111 },
        { name: 111 }, //加入一条数据方便演示
      ],
      baseform: {
        taskId: "",
        buyerNick: "",
        tradingVolume: 0,
        orderNo: "", //
        tradingType: "",
        orderType: 0, //
        rebatesType: 1,
        buyerType: 1, //
        rebatesChannel: 1,
        rebatesWay: "",
        rebatesAmount: "",
      },
      //任务列表数据
      taskPanelDialog: false, //显示任务面板
      qrCodeDialog: false, // 显示微信二维码窗口
      chatRoomQrCodeDialog: false, // 显示微信二维码窗口
      redEnvelopeDialog: false, // 显示红包
      transferMoneyDialog: false, // 显示红包
      // replyDrawerVisiable: false, // 快捷语
      managerVisiable: false, // 群管理
      circleDrawerVisiable: false, // 好友的朋友圈
      wechatAppDialog: false, // 发小程序
      linkDialog: false, // 发链接
      ghDialog: false, // 发链接
      weappRules: {
        AppId: [{ required: true, message: "请输入AppId", trigger: "blur" }],
        SourceName: [
          { required: true, message: "请输入SourceName", trigger: "blur" },
        ],
        Icon: [{ required: true, message: "请输入Icon", trigger: "blur" }],
        PagePath: [
          { required: true, message: "请输入PagePath", trigger: "blur" },
        ],
        // Source: [
        //   { required: true, message: '请输入Source', trigger: 'blur' },
        // ],
        Title: [{ required: true, message: "请输入Title", trigger: "blur" }],
        Thumb: [{ required: true, message: "请输入Thumb", trigger: "blur" }],
      },
      weapp: {
        AppId: "wxe99ba6e7fa3e8672",
        SourceName: "gh_5b0c2f762fc0@app",
        Icon:
          "http://wx.qlogo.cn/mmhead/Q3auHgzwzM5bBMPvk6Oohdlo4FpjGgLsTtcSYJKhibnoQWFphTVy7Bw/96",
        Source: "建业+",
        Title: "考拉之选 点断保鲜膜 食品级材质",
        Thumb:
          "http://gaia-projectc.oss-cn-hangzhou.aliyuncs.com/wxid_9988ti1oz81g22%2Fth_2fb4cbd7008c2e3cc33f6e49573c00cc.jpg",
        PagePath:
          "pages/index/index.html?_type=h5Link&h5url=https%3A%2F%2Fmall.yijiahn.com%2Fmall%2Fapp%2Fstatic%2Fgoods%2F3711147.html%3Fid%3D3711147&sharedUserId=2269485",
        // 'Des': '',
      },
      linkForm: {
        Des: "腾讯新闻 事实派",
        Source: "",
        Thumb:
          "http://www.jjldkj.com/files/phone/files/20201106/97CC97494AE22083E7F21D5C20D174AC.jpg",
        Title: "习近平提“4个坚持”推动中欧关系发展",
        TypeStr: "[链接]",
        Url:
          "https://view.inews.qq.com/k/20200915A0B8I100?fontRatio=1&openid=o04IBAPM5TvGFVAsbK7x9E3IdNQs&key=1ece873f79715ee8c3bce80ed2f0658ba6c0c1a25f034bca383f06daa3112d64c459e34ad1604de9d78db129ef73b75a2806ae16083a061ab796c5a1c2c1d36a5c0e152aca68a0943b800ada20a391fecf664ea6029280f1c1515b638063d16be25efbdd5ea0549a77db58e04587d7365816f058a5850ee29c61ddad7ef621ef&version=27001135&devicetype=android-29&wuid=oDdoCt1c2dvaUXS-phjN2zofQmOw&cv=0x27001135&dt=2&lang=zh_CN&pass_ticket=TWLEm7NEJBgdbN0Jm7Ljpmn7lrIDtBRSiXxwDfXXQcqSmDjKlEJi6CukY3wFLoR%2F&sharer=o04IBAPM5TvGFVAsbK7x9E3IdNQs&uid=&shareto=",
      },
      linkRules: {
        Title: [{ required: true, message: "请输入Title", trigger: "blur" }],
        Thumb: [{ required: true, message: "请输入Thumb", trigger: "blur" }],
        Url: [{ required: true, message: "请输入Url", trigger: "blur" }],
        Des: [{ required: true, message: "请输入Des", trigger: "blur" }],
      },

      action: 0,
      dialogTilte: "添加群成员",
      dialogData: [],
      friendsDialogVisible: false,

      // 红包
      redForm: {
        money: 1, // 红包金额
        number: 1, // 红包数量
        blessings: "恭喜发财，大吉大利", // 红包祝福语
        password: "", // 红包密码
      },
      rules: {
        money: [
          {
            required: true,
            message: "请输入红包金额1-20000分",
            trigger: "blur",
          },
          { validator: checkMoney, trigger: "blur" },
        ],
        number: [
          { required: true, message: "请输入红包个数", trigger: "blur" },
          { validator: checkNumber, trigger: "blur" },
        ],
        blessings: [
          { required: true, message: "请输入祝福语", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 6, message: "密码长度不对", trigger: "blur" },
        ],
      },

      // 转账
      remittanceForm: {
        money: 1, // 转账金额
        password: "", // 转账密码
        memo: "", // 转账说明
      },
      // qq表情
      expressionMap: {
        0: "微笑",
        1: "撇嘴",
        2: "色",
        3: "发呆",
        4: "得意",
        5: "流泪",
        6: "害羞",
        7: "闭嘴",
        8: "睡",
        9: "大哭",
        10: "尴尬",
        11: "发怒",
        12: "调皮",
        13: "呲牙",
        14: "惊讶",
        15: "难过",
        16: "酷",
        17: "冷汗",
        18: "抓狂",
        19: "吐",
        20: "偷笑",
        21: "愉快",
        22: "白眼",
        23: "傲慢",
        24: "饥饿",
        25: "困",
        26: "惊恐",
        27: "流汗",
        28: "憨笑",
        29: "悠闲",
        30: "奋斗",
        31: "咒骂",
        32: "疑问",
        33: "嘘",
        34: "晕",
        35: "疯了",
        36: "衰",
        37: "骷髅",
        38: "敲打",
        39: "再见",
        40: "擦汗",
        41: "抠鼻",
        42: "鼓掌",
        43: "糗大了",
        44: "坏笑",
        45: "左哼哼",
        46: "右哼哼",
        47: "哈欠",
        48: "鄙视",
        49: "委屈",
        50: "快哭了",
        51: "阴险",
        52: "亲亲",
        53: "吓",
        54: "可怜",
        55: "菜刀",
        56: "西瓜",
        57: "啤酒",
        58: "篮球",
        59: "乒乓",
        60: "咖啡",
        61: "饭",
        62: "猪头",
        63: "玫瑰",
        64: "凋谢",
        65: "嘴唇",
        66: "爱心",
        67: "心碎",
        68: "蛋糕",
        69: "闪电",
        70: "炸弹",
        71: "刀",
        72: "足球",
        73: "瓢虫",
        74: "便便",
        75: "月亮",
        76: "太阳",
        77: "礼物",
        78: "拥抱",
        79: "强",
        80: "弱",
        81: "握手",
        82: "胜利",
        83: "抱拳",
        84: "勾引",
        85: "拳头",
        86: "差劲",
        87: "爱你",
        88: "NO",
        89: "OK",
        90: "爱情",
        91: "飞吻",
        92: "跳跳",
        93: "发抖",
        94: "怄火",
        95: "转圈",
        96: "磕头",
        97: "回头",
        98: "跳绳",
        99: "投降",
        100: "激动",
        101: "乱舞",
        102: "献吻",
        103: "左太极",
        104: "右太极",
        105: "笑脸",
        106: "生病",
        107: "破涕为笑",
        108: "吐舌",
        109: "脸红",
        110: "恐惧",
        111: "失望",
        112: "无语",
        113: "嘿哈",
        114: "捂脸",
        115: "奸笑",
        116: "机智",
        117: "皱眉",
        118: "耶",
        119: "鬼魂",
        120: "合十",
        121: "强壮",
        122: "庆祝",
        123: "礼物",
        124: "红包",
        125: "鸡",
        126: "开心",
        127: "大笑",
        128: "热情",
        129: "眨眼",
        130: "色",
        131: "接吻",
        132: "亲吻",
        133: "露齿笑",
        134: "满意",
        135: "戏弄",
        136: "得意",
        137: "汗",
        138: "低落",
        139: "呸",
        140: "焦虑",
        141: "担心",
        142: "震惊",
        143: "悔恨",
        144: "眼泪",
        145: "哭",
        146: "晕",
        147: "心烦",
        148: "生气",
        149: "睡觉",
        150: "恶魔",
        151: "外星人",
        152: "心",
        153: "心碎",
        154: "丘比特",
        155: "闪烁",
        156: "星星",
        157: "叹号",
        158: "问号",
        159: "睡着",
        160: "水滴",
        161: "音乐",
        162: "火",
        163: "便便",
        164: "强",
        165: "弱",
        166: "拳头",
        167: "胜利",
        168: "上",
        169: "下",
        170: "右",
        171: "左",
        172: "第一",
        173: "吻",
        174: "热恋",
        175: "男孩",
        176: "女孩",
        177: "女士",
        178: "男士",
        179: "天使",
        180: "骷髅",
        181: "红唇",
        182: "太阳",
        183: "下雨",
        184: "多云",
        185: "雪人",
        186: "月亮",
        187: "闪电",
        188: "海浪",
        189: "猫",
        190: "小狗",
        191: "老鼠",
        192: "仓鼠",
        193: "兔子",
        194: "狗",
        195: "青蛙",
        196: "老虎",
        197: "考拉",
        198: "熊",
        199: "猪",
        200: "牛",
        201: "野猪",
        202: "猴子",
        203: "马",
        204: "蛇",
        205: "鸽子",
        206: "鸡",
        207: "企鹅",
        208: "毛虫",
        209: "章鱼",
        210: "鱼",
        211: "鲸鱼",
        212: "海豚",
        213: "玫瑰",
        214: "花",
        215: "棕榈树",
        216: "仙人掌",
        217: "礼盒",
        218: "南瓜灯",
        219: "圣诞老人",
        220: "圣诞树",
        221: "铃",
        222: "气球",
        223: "CD",
        224: "相机",
        225: "录像机",
        226: "电脑",
        227: "电视",
        228: "电话",
        229: "解锁",
        230: "锁",
        231: "钥匙",
        232: "成交",
        233: "灯泡",
        234: "邮箱",
        235: "浴缸",
        236: "钱",
        237: "炸弹",
        238: "手枪",
        239: "药丸",
        240: "橄榄球",
        241: "篮球",
        242: "足球",
        243: "棒球",
        244: "高尔夫",
        245: "奖杯",
        246: "入侵者",
        247: "唱歌",
        248: "吉他",
        249: "比基尼",
        250: "皇冠",
        251: "雨伞",
        252: "手提包",
        253: "口红",
        254: "戒指",
        255: "钻石",
        256: "咖啡",
        257: "啤酒",
        258: "干杯",
        259: "鸡尾酒",
        260: "汉堡",
        261: "薯条",
        262: "意面",
        263: "寿司",
        264: "面条",
        265: "煎蛋",
        266: "冰激凌",
        267: "蛋糕",
        268: "苹果",
        269: "飞机",
        270: "火箭",
        271: "自行车",
        272: "高铁",
        273: "警告",
        274: "旗",
        275: "男人",
        276: "女人",
        277: "O",
        278: "X",
        279: "版权",
        280: "注册商标",
        281: "商标",
      },
      // emoji表情
      emojiMap: {
        "<笑脸>": "1f604",
        "<笑臉>": "1f604",
        "<Laugh>": "1f604",
        "<开心>": "1f60a",
        "<開心>": "1f60a",
        "<Happy>": "1f60a",
        "<大笑>": "1f603",
        "<Big Smile>": "1f603",
        "<热情>": "263a",
        "<熱情>": "263a",
        "<Glowing>": "263a",
        "<眨眼>": "1f609",
        "<Wink>": "1f609",
        "<色>": "1f60d",
        "<Love>": "1f60d",
        "<Drool>": "1f60d",
        "<接吻>": "1f618",
        "<Smooch>": "1f618",
        "<亲吻>": "1f61a",
        "<親吻>": "1f61a",
        "<Kiss>": "1f61a",
        "<脸红>": "1f633",
        "<臉紅>": "1f633",
        "<Blush>": "1f633",
        "<露齿笑>": "1F601",
        "<露齒笑>": "1F601",
        "<Grin>": "1f63c",
        "<满意>": "1f60c",
        "<滿意>": "1f60c",
        "<Satisfied>": "1f60c",
        "<戏弄>": "1f61c",
        "<戲弄>": "1f61c",
        "<Tease>": "1f61c",
        "<吐舌>": "1F61D",
        "<Tongue>": "1F61D",
        "<无语>": "1f612",
        "<無語>": "1f612",
        "<Speechless>": "1f612",
        "<得意>": "1f60f",
        "<Smirk>": "1f60f",
        "<CoolGuy>": "1f60f",
        "<汗>": "1f613",
        "<Sweat>": "1f613",
        "<失望>": "1F614",
        "<Let Down>": "1F614",
        "<合十>": "1f64f",
        "<祈禱>": "1f64f",
        "<低落>": "1f61e",
        "<Low>": "1f61e",
        "<呸>": "1f616",
        "<Ugh>": "1f616",
        "<焦虑>": "1f625",
        "<焦慮>": "1f625",
        "<Anxious>": "1f625",
        "<担心>": "1f630",
        "<擔心>": "1f630",
        "<Worried>": "1f630",
        "<震惊>": "1f628",
        "<震驚>": "1f628",
        "<Shocked>": "1f628",
        "<悔恨>": "1f62b",
        "<D’oh!>": "1f62b",
        "<眼泪>": "1f622",
        "<眼淚>": "1f622",
        "<Tear>": "1f622",
        "<哭>": "1f62d",
        "<Cry>": "1f62d",
        "<破涕为笑>": "1f602",
        "<破涕為笑>": "1f602",
        "<Lol>": "1f602",
        "<晕>": "1F632",
        "<Dead>": "1f632",
        "<Dizzy>": "1f632",
        "<恐惧>": "1f631",
        "<恐懼>": "1f631",
        "<Terror>": "1f631",
        "<心烦>": "1f620",
        "<心煩>": "1f620",
        "<Upset>": "1f620",
        "<生气>": "1F621",
        "<生氣>": "1F621",
        "<Angry>": "1F621",
        "<睡觉>": "1f62a",
        "<睡覺>": "1f62a",
        "<Zzz>": "1f62a",
        "<生病>": "1f637",
        "<Sick>": "1f637",
        "<恶魔>": "1f47f",
        "<惡魔>": "1f47f",
        "<Demon>": "1f47f",
        "<外星人>": "1f47d",
        "<Alien>": "1f47d",
        "<心>": "2764",
        "<Heart>": "2764",
        "<心碎>": "1f494",
        "<Heartbroken>": "1f494",
        "<BrokenHeart>": "1f494",
        "<丘比特>": "1f498",
        "<Cupid>": "1f498",
        "<闪烁>": "2728",
        "<閃爍>": "2728",
        "<Twinkle>": "2728",
        "<星星>": "1f31f",
        "<Star>": "1f31f",
        "<叹号>": "2755",
        "<嘆號>": "2755",
        "<!>": "2755",
        "<问号>": "2754",
        "<問號>": "2754",
        "<?>": "2754",
        "<睡着>": "1f4a4",
        "<睡著>": "1f4a4",
        "<Asleep>": "1f4a4",
        "<水滴>": "1f4a6",
        "<Drops>": "1f4a6",
        "<音乐>": "1f3b5",
        "<音樂>": "1f3b5",
        "<Music>": "1f3b5",
        "<火>": "1f525",
        "<Fire>": "1f525",
        "<便便>": "1f4a9",
        "<Poop>": "1f4a9",
        "<强>": "1f44d",
        "<強>": "1f44d",
        "<ThumbsUp>": "1f44d",
        "<弱>": "1f44e",
        "<ThumbsDown>": "1f44e",
        "<拳头>": "1f44a",
        "<拳頭>": "1f44a",
        "<Punch>": "1f44a",
        "<Fist>": "1f44a",
        "<胜利>": "270c",
        "<勝利>": "270c",
        "<Peace>": "270c",
        "<上>": "1f446",
        "<Up>": "1f446",
        "<下>": "1f447",
        "<Down>": "1f447",
        "<右>": "1f449",
        "<Right>": "1f449",
        "<左>": "1f448",
        "<Left>": "1f448",
        "<第一>": "261d",
        "<#1>": "261d",
        "<强壮>": "1f4aa",
        "<強壯>": "1f4aa",
        "<Strong>": "1f4aa",
        "<吻>": "1f48f",
        "<Kissing>": "1f48f",
        "<热恋>": "1f491",
        "<熱戀>": "1f491",
        "<Couple>": "1f491",
        "<男孩>": "1f466",
        "<Boy>": "1f466",
        "<女孩>": "1f467",
        "<Girl>": "1f467",
        "<女士>": "1f469",
        "<Lady>": "1f469",
        "<男士>": "1f468",
        "<Man>": "1f468",
        "<天使>": "1f47c",
        "<Angel>": "1f47c",
        "<骷髅>": "1f480",
        "<骷髏頭>": "1f480",
        "<骷髏>": "1f480",
        "<Skull>": "1f480",
        "<红唇>": "1f48b",
        "<紅唇>": "1f48b",
        "<Lips>": "1f48b",
        "<太阳>": "2600",
        "<太陽>": "2600",
        "<Sun>": "2600",
        "<下雨>": "2614",
        "<Rain>": "2614",
        "<多云>": "2601",
        "<多雲>": "2601",
        "<Cloud>": "2601",
        "<雪人>": "26c4",
        "<Snowman>": "26c4",
        "<月亮>": "1f319",
        "<Moon>": "1f319",
        "<闪电>": "26a1",
        "<閃電>": "26a1",
        "<Lightning>": "26a1",
        "<海浪>": "1f30a",
        "<Waves>": "1f30a",
        "<猫>": "1f431",
        "<貓>": "1f431",
        "<Cat>": "1f431",
        "<小狗>": "1F436",
        "<Doggy>": "1F436",
        "<老鼠>": "1f42d",
        "<Mouse>": "1f42d",
        "<仓鼠>": "1f439",
        "<倉鼠>": "1f439",
        "<Hamster>": "1f439",
        "<兔子>": "1f430",
        "<Rabbit>": "1f430",
        "<狗>": "1f43a",
        "<Dog>": "1f43a",
        "<青蛙>": "1f438",
        "<Frog>": "1f438",
        "<老虎>": "1f42f",
        "<Tiger>": "1f42f",
        "<考拉>": "1f428",
        "<Koala>": "1f428",
        "<熊>": "1f43b",
        "<Bear>": "1f43b",
        "<猪>": "1f437",
        "<豬>": "1f437",
        "<Pig>": "1f437",
        "<牛>": "1f42e",
        "<Cow>": "1f42e",
        "<野猪>": "1f417",
        "<野豬>": "1f417",
        "<Boar>": "1f417",
        "<猴子>": "1f435",
        "<Monkey>": "1f435",
        "<马>": "1f434",
        "<馬>": "1f434",
        "<Horse>": "1f434",
        "<蛇>": "1f40d",
        "<Snake>": "1f40d",
        "<鸽子>": "1f426",
        "<鴿子>": "1f426",
        "<Pigeon>": "1f426",
        "<鸡>": "1f414",
        "<雞>": "1f414",
        "<Chicken>": "1f414",
        "<企鹅>": "1f427",
        "<企鵝>": "1f427",
        "<Penguin>": "1f427",
        "<毛虫>": "1f41b",
        "<毛蟲>": "1f41b",
        "<Caterpillar>": "1f41b",
        "<章鱼>": "1f419",
        "<八爪魚>": "1f419",
        "<Octopus>": "1f419",
        "<鱼>": "1f420",
        "<魚>": "1f420",
        "<Fish>": "1f420",
        "<鲸鱼>": "1f433",
        "<鯨魚>": "1f433",
        "<Whale>": "1f433",
        "<海豚>": "1f42c",
        "<Dolphin>": "1f42c",
        "<玫瑰>": "1f339",
        "<Rose>": "1f339",
        "<花>": "1f33a",
        "<Flower>": "1f33a",
        "<棕榈树>": "1f334",
        "<棕櫚樹>": "1f334",
        "<Palm>": "1f334",
        "<仙人掌>": "1f335",
        "<Cactus>": "1f335",
        "<礼盒>": "1f49d",
        "<禮盒>": "1f49d",
        "<Candy Box>": "1f49d",
        "<南瓜灯>": "1f383",
        "<南瓜燈>": "1f383",
        "<Jack-o-lantern>": "1f383",
        "<鬼魂>": "1f47b",
        "<Ghost>": "1f47b",
        "<圣诞老人>": "1f385",
        "<聖誕老人>": "1f385",
        "<Santa>": "1f385",
        "<圣诞树>": "1f384",
        "<聖誕樹>": "1f384",
        "<Xmas Tree>": "1f384",
        "<礼物>": "1f381",
        "<禮物>": "1f381",
        "<Gift>": "1f381",
        "<铃>": "1f514",
        "<鈴鐺>": "1f514",
        "<Bell>": "1f514",
        "<庆祝>": "1f389",
        "<慶祝>": "1f389",
        "<Party>": "1f389",
        "<气球>": "1f388",
        "<氣球>": "1f388",
        "<Balloon>": "1f388",
        "<CD>": "1f4bf",
        "<相机>": "1f4f7",
        "<相機>": "1f4f7",
        "<Camera>": "1f4f7",
        "<录像机>": "1f3a5",
        "<錄影機>": "1f3a5",
        "<Film Camera>": "1f3a5",
        "<电脑>": "1f4bb",
        "<電腦>": "1f4bb",
        "<Computer>": "1f4bb",
        "<电视>": "1f4fa",
        "<電視>": "1f4fa",
        "<TV>": "1f4fa",
        "<电话>": "1f4de",
        "<電話>": "1f4de",
        "<Phone>": "1f4de",
        "<解锁>": "1f513",
        "<解鎖>": "1f513",
        "<Unlocked>": "1f513",
        "<锁>": "1f512",
        "<鎖>": "1f512",
        "<Locked>": "1f512",
        "<钥匙>": "1f511",
        "<鑰匙>": "1f511",
        "<Key>": "1f511",
        "<成交>": "1f528",
        "<Judgement>": "1f528",
        "<灯泡>": "1f4a1",
        "<燈泡>": "1f4a1",
        "<Light bulb>": "1f4a1",
        "<邮箱>": "1f4eb",
        "<郵箱>": "1f4eb",
        "<Mail>": "1f4eb",
        "<浴缸>": "1f6c0",
        "<Wash>": "1f6c0",
        "<钱>": "1f4b2",
        "<錢>": "1f4b2",
        "<Money>": "1f4b2",
        "<炸弹>": "1f4a3",
        "<炸彈>": "1f4a3",
        "<Bomb>": "1f4a3",
        "<手枪>": "1f52b",
        "<手槍>": "1f52b",
        "<Pistol>": "1f52b",
        "<药丸>": "1f48a",
        "<藥丸>": "1f48a",
        "<Pill>": "1f48a",
        "<橄榄球>": "1f3c8",
        "<橄欖球>": "1f3c8",
        "<Football>": "1f3c8",
        "<篮球>": "1f3c0",
        "<籃球>": "1f3c0",
        "<Basketball>": "1f3c0",
        "<足球>": "26bd",
        "<Soccer Ball>": "26bd",
        "<Soccer>": "26bd",
        "<棒球>": "26be",
        "<Baseball>": "26be",
        "<高尔夫>": "26f3",
        "<高爾夫>": "26f3",
        "<Golf>": "26f3",
        "<奖杯>": "1f3c6",
        "<獎盃>": "1f3c6",
        "<Trophy>": "1f3c6",
        "<入侵者>": "1f47e",
        "<Invader>": "1f47e",
        "<唱歌>": "1f3a4",
        "<Singing>": "1f3a4",
        "<吉他>": "1f3b8",
        "<Guitar>": "1f3b8",
        "<比基尼>": "1f459",
        "<Bikini>": "1f459",
        "<皇冠>": "1f451",
        "<Crown>": "1f451",
        "<雨伞>": "1f302",
        "<雨傘>": "1f302",
        "<Umbrella>": "1f302",
        "<手提包>": "1f45c",
        "<Purse>": "1f45c",
        "<口红>": "1f484",
        "<口紅>": "1f484",
        "<Lipstick>": "1f484",
        "<戒指>": "1f48d",
        "<Ring>": "1f48d",
        "<钻石>": "1f48e",
        "<鑽石>": "1f48e",
        "<Gem>": "1f48e",
        "<咖啡>": "2615",
        "<Coffee>": "2615",
        "<啤酒>": "1f37a",
        "<Beer>": "1f37a",
        "<干杯>": "1f37b",
        "<乾杯>": "1f37b",
        "<Toast>": "1f37b",
        "<鸡尾酒>": "1F378",
        "<雞尾酒>": "1F378",
        "<Martini>": "1F378",
        "<汉堡>": "1f354",
        "<漢堡>": "1f354",
        "<Burger>": "1f354",
        "<薯条>": "1f35f",
        "<薯條>": "1f35f",
        "<Fries>": "1f35f",
        "<意面>": "1f35d",
        "<意粉>": "1f35d",
        "<Sphaghetti>": "1f35d",
        "<寿司>": "1f363",
        "<壽司>": "1f363",
        "<Sushi>": "1f363",
        "<面条>": "1f35c",
        "<麵條>": "1f35c",
        "<Noodles>": "1f35c",
        "<煎蛋>": "1f373",
        "<Eggs>": "1f373",
        "<冰激凌>": "1f366",
        "<雪糕>": "1f366",
        "<Ice Cream>": "1f366",
        "<蛋糕>": "1f382",
        "<Cake>": "1f382",
        "<苹果>": "1F34E",
        "<蘋果>": "1F34E",
        "<Apple>": "1F34E",
        "<飞机>": "2708",
        "<飛機>": "2708",
        "<Plane>": "2708",
        "<火箭>": "1f680",
        "<Rocket ship>": "1f680",
        "<自行车>": "1f6b2",
        "<單車>": "1f6b2",
        "<Bike>": "1f6b2",
        "<高铁>": "1f684",
        "<高鐵>": "1f684",
        "<Bullet Train>": "1f684",
        "<警告>": "26a0",
        "<Warning>": "26a0",
        "<旗>": "1f3c1",
        "<Flag>": "1f3c1",
        "<男人>": "1f6b9",
        "<男>": "1f6b9",
        "<Men>": "1f6b9",
        "<女人>": "1f6ba",
        "<女>": "1f6ba",
        "<Women>": "1f6ba",
        "<O>": "2b55",
        "<X>": "274C",
        "<版权>": "a9",
        "<版權>": "a9",
        "<Copyright>": "a9",
        "<注册商标>": "ae",
        "<注冊商標>": "ae",
        "<Registered TM>": "ae",
        "<商标>": "2122",
        "<商標>": "2122",
        "<Trademark>": "2122",
      },
    };
  },
  components: {
    SlotFriends,
    // FastReply,
    FriendCircle,
    LabelRemark,
    ChatRoomManager,
    // LabelManager
  },
  computed: {
    ...mapGetters({
      ghMap: "conversation/ghMap",
      content: "conversation/content",
      contentType: "conversation/contentType",
      currentFriends: "conversation/currentFriends",
      currentWeChatId: "conversation/currentWeChatId",
      rebatesChannel: "conversation/rebatesChannel",
      rebatesChannelUrl: "conversation/rebatesChannelUrl",
      friends: "nedb/friendsAll",
      labels: "nedb/labels",
      qrCode: "nedb/conversationQrCode",
      chatRoomQrCode: "nedb/chatRoomQrCode",
      toduList: "conversation/toduList",
      taskDetailManager: "conversation/taskDetailManager",
      //   friendsMap: 'friendsMap',
      //   qrcodes: 'conversation/qrcodes',
      //   chatRoomQrCodes: 'conversation/chatRoomQrCodes'
    }),
    // 当前微信的公众号列表
    ghList() {
      return this.ghMap[this.currentWeChatId]
        ? this.ghMap[this.currentWeChatId]
        : [];
    },
    // 当前选中的好友
    currentFriend() {
      return this.currentFriends[this.currentWeChatId] || {};
    },
    // ============================================
    // 好友总数
    totalPage() {
      return this.friends.length;
    },
    // 填充表格数据
    tableData() {
      // 分页 每页50
      let newFriends = [];
      let size = this.pageSize;
      for (let i = 0; i < this.friends.length; i += size) {
        newFriends.push(this.friends.slice(i, i + size));
      }
      return newFriends;
    },
    // 搜索结果是否全选
    allCheckState() {
      let state = this.searchContent.every((x) => {
        return this.friendIdChose.indexOf(x.FriendId) >= 0;
      });
      return state;
    },
    allCheckState2() {
      let friends = this.tableData[this.currentPage - 1];
      if (friends) {
        return friends.every((x) => {
          return this.friendIdChose.indexOf(x.FriendId) >= 0;
        });
      }
      return false;
    },
    // 有选中好友
    hasCurrentFriend() {
      if (JSON.stringify(this.currentFriend) === "{}") {
        return false;
      }
      return true;
    },
    // ============================================
    // 个人二维码
    currentQrCode() {
      return this.qrcodes[this.currentWechats.WeChatId]
        ? this.qrcodes[this.currentWechats.WeChatId]
        : false;
    },
    // 群二维码
    currentChatRoomQrCode() {
      return this.chatRoomQrCodes[this.currentFriend.UserName]
        ? this.chatRoomQrCodes[this.currentFriend.UserName]
        : false;
    },
  },
  methods: {
    tradingTypeType(row, column, cellValue, index) {
      if (cellValue === "1") {
        return "预留单";
      } else if (cellValue === "0") {
        return "当天单";
      }
    },
    orderTypeType(row, column, cellValue, index) {
      if (cellValue === "1") {
        return "是";
      } else if (cellValue === "0") {
        return "否";
      }
    },
    rebatesChannelType(row, column, cellValue, index) {
      if (cellValue === "1") {
        return "银行卡";
      } else if (cellValue === "0") {
        return "微信收款码";
      }
    },
    rebatesStatusType(row, column, cellValue, index) {
      if (cellValue === "1") {
        return "已付款";
      } else if (cellValue === "0") {
        return "未付款";
      }
    },
    rebatesStatusFormat(row, column, cellValue, index){
      let arr = [
        "新建",
        "待返款",
        "已返款",
        "已完成"
      ];
      return arr[Number(cellValue)];
    },
    taskDetailFormat(row, column, cellValue, index) {
      let arr = [
        "新建",
        "待付款",
        "已付款",
        "待评价",
        "已评价",
        "已追评",
        "已完成",
        "已撤销",
      ];
      return arr[Number(cellValue)];
    },
    showRebatesWay(row) {
      if (row.rebatesChannel == 0) {
        return '<img  src="' + row.rebatesWay + '"  alt="" >';
      }
      return "<span v-else>" + row.rebatesWay + "</span>";
    },
    chooseTableClick(row, column, cell, event) {
      this.taskPanelDialog = false;
      let data = {
        name: row.pandaTask.taskName,
        storeName: row.pandaTask.storeName,
        productName: row.pandaTask.productName,
        keywords: row.pandaTask.keywords,
        price: row.pandaTask.price,
        linkId: row.taskId,
        taskDetailId: row.taskDetailId,
        picture: row.pandaTask.picture,
        buyerNick: row.buyerNick,
        orderType: row.orderType,
        rebatesType: row.rebatesType,
        buyerType: row.buyerType,
        tradingType: row.tradingType,
        rebatesChannel: row.rebatesChannel,
        rebatesWay: row.rebatesWay,
        status: row.status,
      };
      console.log(data);
      this.$store.commit("conversation/SET_TASKITEMFORM", data);
      this.$store.commit("conversation/SET_ITEMSHOW", true);
      this.$store.commit("conversation/SET_CHHOOSESHOW", false);
      if (row.rebatesChannel == 0) {
        console.log("显示返款码上传！");
        this.$store.commit("conversation/SET_REBATESCHANNEL", 0);
        this.$store.commit(
          "conversation/SET_REBATESCHANNELURL",
          row.rebatesWay
        );
        this.$store.commit("conversation/SET_SHOWADDWXPAYMENTCODE", true);
      } else {
        this.$store.commit("conversation/SET_REBATESCHANNEL", 1);
        this.$store.commit("conversation/SET_REBATESCHANNELURL", "");
        this.$store.commit("conversation/SET_SHOWADDWXPAYMENTCODE", false);
      }
    },
    // 撤回任务
    chehuiTask(row, column, cell, event) {
      console.log(row);
      this.$store.dispatch("websocket/CloseTaskDetail", {
        taskDetailId: row.taskDetailId,
      });
    },
    // 日期格式化
    parseTime(row, column, cellValue, index) {
      console.log(cellValue);
      return this.parseTimeFmt(new Date(parseInt(cellValue)), "{y}-{m}-{d}");
    },
    parseTimeFmt(time, pattern) {
      if (arguments.length === 0 || !time) {
        return null;
      }
      const format = pattern || "{y}-{m}-{d} {h}:{i}:{s}";
      let date;
      if (typeof time === "object") {
        date = time;
      } else {
        if (typeof time === "string" && /^[0-9]+$/.test(time)) {
          time = parseInt(time);
        } else if (typeof time === "string") {
          time = time.replace(new RegExp(/-/gm), "/");
        }
        if (typeof time === "number" && time.toString().length === 10) {
          time = time * 1000;
        }
        date = new Date(time);
      }
      const formatObj = {
        y: date.getFullYear(),
        m: date.getMonth() + 1,
        d: date.getDate(),
        h: date.getHours(),
        i: date.getMinutes(),
        s: date.getSeconds(),
        a: date.getDay(),
      };
      const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
        let value = formatObj[key];
        // Note: getDay() returns 0 on Sunday
        if (key === "a") {
          return ["日", "一", "二", "三", "四", "五", "六"][value];
        }
        if (result.length > 0 && value < 10) {
          value = "0" + value;
        }
        return value || 0;
      });
      return time_str;
    },
    rebatesChannelUpdate(histType) {
      this.baseform.rebatesWay = "";
      this.$store.commit("conversation/SET_REBATESCHANNEL", histType);
      if (histType == 0) {
        this.$store.commit("conversation/SET_REBATESCHANNELURL", "");
        this.$store.commit("conversation/SET_SHOWADDWXPAYMENTCODE", true);
      }
    },
    removeImg() {
      this.$store.commit("conversation/SET_REBATESCHANNELURL", "");
      this.$store.commit("conversation/SET_SHOWADDWXPAYMENTCODE", true);
      this.$refs.upimg.clearAllUpfile();
      this.imageUrls = [];
    },
    // 修改任务
    handleEditTask(row) {
      console.log(row);
      this.taskModifyBox = true;
    },
    // 任务面板
    showTaskList() {
      this.taskPanelDialog = true;
      this.$store.dispatch("websocket/GetTaskDetailManager");
    },
    // 选择表情
    selectExpression(val) {
      if (this.contentType !== "Text") {
        this.$store.commit("conversation/SET_CONTENT", "");
      }
      let rm = this.expressionMap[val];
      let qqList = [113, 114, 115, 116, 117, 118, 124, 125];
      // qq表情
      if (rm) {
        if (val < 105 || qqList.indexOf(val) >= 0) {
          rm = "[" + this.expressionMap[val] + "]";
        } else {
          rm = "<" + rm + ">";
          rm = this.emojiMap[rm];
          // let en = '😁'
          // let encode = en.codePointAt(0)
          let rmencode = parseInt(rm, 16);
          rm = String.fromCodePoint(rmencode);
        }
        let newContent = this.content + rm;
        this.$store.commit("conversation/SET_CONTENT_TYPE", "Text");
        this.$store.commit("conversation/SET_CONTENT", newContent);
      }
      //   else {
      //     this.$message.warning('无效选择')
      //   }
    },
    // 选择图片|视频|语音|文件
    choseMedia(type) {
      let formdata = new FormData(); // 上传
      let fileObj = ""; // 文件对象
      let computedType = ""; // 文件的type
      if (type === "Voice") {
        // 发送语音
        fileObj = this.$refs.toolsVoice.files;
      } else {
        // 发送图片|视频|文件
        fileObj = this.$refs.toolsFile.files;
      }
      // 如果有选中文件
      if (fileObj[0]) {
        // 文件大小
        let fileSize = fileObj[0].size;
        let fileName = fileObj[0].name;
        // 文件后缀
        let fileType = fileObj[0].name.replace(/.+\./, "").toLowerCase();
        // 文件大于100M不能发送
        if (fileSize > 104857600 || fileSize <= 0) {
          this.$message.warning("文件不能大于100M，文件不能是空文件");
          return;
        }
        // 计算要发送的消息类型
        if (type === "Voice") {
          computedType = "Voice";
          // 验证文件类型
          if (["amr", "mp3"].indexOf(fileType) < 0) {
            this.$message.warning("发送语音只能选择MP3或AMR文件");
            return;
          }
        } else {
          if (fileType === "mp4") {
            computedType = "Video";
          } else if (["jpg", "png", "gif", "jpeg"].indexOf(fileType) >= 0) {
            computedType = "Picture";
          } else {
            computedType = "File";
          }
        }
        // 验证通过
        formdata.append("myfile", fileObj[0]);
        const loading = this.$loading({
          lock: true,
          text: "文件上传中",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)",
        });
        // 如果是发送语音
        if (type === "Voice") {
          // 如果选择的是mp3文件，文件上传到服务器，转为amr，返回amr的地址
          // 如果选择的是amr文件，直接上传到服务器，返回amr的地址
          if (fileType === "mp3") {
            formdata.append("isMp3ToAmr", true);
          } else if (fileType === "amr") {
            formdata.append("isAmrToMp3", false);
          }
          // 上传mp3 或者amr转为MP3
          let formDataMp3 = new FormData();
          formDataMp3.append("myfile", fileObj[0]);
          if (fileType === "mp3") {
            formDataMp3.append("isMp3ToAmr", false);
          } else if (fileType === "amr") {
            formDataMp3.append("isAmrToMp3", true);
          }
          this.$store
            .dispatch("UploadFile", formDataMp3)
            .then((res) => {})
            .catch((err) => {});
        }
        this.$store
          .dispatch("UploadFile", formdata)
          .then((res) => {
            let content = res.url;
            if (computedType === "File") {
              content = JSON.stringify({
                name: fileName,
                url: res.url,
                size: fileSize,
                Source: "pc",
              });
            }
            // 计算时长
            //   if (type === 'Voice') {
            //     let audioElement = new Audio(url)
            //     audioElement.addEventListener('loadedmetadata', function (_event) {
            //       duration = audioElement.duration
            //     })
            //   }
            this.$store.commit("conversation/SET_CONTENT", content);
            this.$store.commit("conversation/SET_CONTENT_TYPE", computedType);
            loading.close();
            type === "Voice"
              ? (this.$refs.toolsVoice.value = "")
              : (this.$refs.toolsFile.value = "");
          })
          .catch((err) => {
            this.$message({
              message: "文件上传失败：" + err,
              type: "error",
              duration: 0,
              showClose: true,
            });
            loading.close();
          });
      }
    },
    // 显示微信的二维码
    showQrCode() {
      if (!this.currentWeChatId) {
        this.$message.warning("请选选中微信！");
        return;
      }
      if (this.qrCode.WeChatId !== this.currentWeChatId) {
        // 从数据库查询qrcode
        this.$store.dispatch(
          "nedb/SetConversationQrCode",
          this.currentWeChatId
        );
      }
      this.dialogTilte = "微信二维码";
      setTimeout(() => {
        this.qrCodeDialog = true;
      }, 100);
    },
    // 显示群聊的二维码
    showChatRoomQrCode() {
      if (!this.currentWeChatId) {
        this.$message.warning("请选选中微信！");
        return;
      }
      if (
        !this.chatRoomQrCode.ChatRoomId ||
        this.chatRoomQrCode.ChatRoomId !== this.currentFriend.UserName
      ) {
        // 从数据库查询chatRoomQrCode'
        this.$store.dispatch("nedb/SetChatRoomQrCode", this.currentFriend);
      }
      this.dialogTilte = "群聊二维码";
      setTimeout(() => {
        this.chatRoomQrCodeDialog = true;
      }, 100);
    },
    // 获取个人号二维码
    pullWeChatQrCodeTask() {
      this.$store.dispatch(
        "websocket/PullWeChatQrCodeTask",
        this.currentWeChatId
      );
      this.$message.info("正在获取，请稍等");
    },
    // 获取群聊二维码
    pullChatRoomQrCodeTask() {
      this.$store.dispatch(
        "websocket/PullChatRoomQrCodeTask",
        this.currentFriend
      );
      this.$message.info("正在获取，请稍等");
    },
    // 历史消息
    showMsgHistory() {
      this.$message.info("待完成，敬请期待！");
      //   if (!this.currentWeChatId) {
      //     this.$message.warning('请先选择一个微信！')
      //     return
      //   }
      //   this.dialogTilte = '创建群聊'
      //   this.action = 8
      //   this.dialogData = this.friends
      //   this.friendsDialogVisible = true
    },
    // 创建群聊
    createChatRoom() {
      if (!this.currentWeChatId) {
        this.$message.warning("请先选择一个微信！");
        return;
      }
      this.dialogTilte = "创建群聊";
      this.action = 8;
      this.dialogData = this.friends;
      this.friendsDialogVisible = true;
    },
    // 显示发名片窗口
    showSendNameCard() {
      this.dialogTilte = "发送名片";
      this.action = "NameCard";
      this.dialogData = this.friends;
      this.friendsDialogVisible = true;
    },
    // 截图
    shearScreen() {
      // this.$message.info('该功能待完成！')
      //   html2canvas(document.getElementById("app"), { useCORS: true }).then(function (canvas) {
      if (process.env.VUE_APP_CURRENTMODE !== "electron") {
        this.$message.warning("web版不支持截图！");
        return;
      } else if (process.env.VUE_APP_CURRENTMODE === "electron") {
        // 和主进程通讯
        this.$ipcRenderer.send("operations", "screencap");
        // 监听主进程
        // this.$ipcRenderer.on('screencap', (event, arg) => {
        //   if (arg) {
        //     // document.execCommand("paste")
        //   }
        // })
      }
    },
    // 清除聊天数据
    clearFriendChats() {
      this.$confirm("此操作将删除本都的聊天数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$store.dispatch("nedb/RemoveChatsByWxId", this.currentFriend);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message.info("已取消删除");
        });
    },
    // 显示发红包的dialog
    showRedEnvelopeDialog() {
      this.redEnvelopeDialog = true;
      this.dialogTilte = "发红包";
    },
    // 发红包
    sendLuckyMoneyTask() {
      if (!this.currentWeChatId) {
        this.$message.warning("请选选中微信！");
        return;
      }
      this.$refs["redEnvelope"].validate((valid) => {
        if (valid) {
          this.$confirm("即将发送红包?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              let wechatId = this.currentFriend.WeChatId;
              let friendId =
                this.currentFriend.FriendId || this.currentFriend.UserName;
              let content = {
                WeChatId: wechatId, // 微信唯一Id
                FriendId: friendId, // 聊天好友微信唯一id
                Money: this.redForm.money, // 钱数，单位：分，最多20000
                Number: 1, // 红包个数，缺省1个
                Passwd: this.redForm.password, // 密码，6位，纯数字
                Wish: this.redForm.blessings, // 祝福语
              };
              this.$store.dispatch("websocket/SendLuckyMoneyTask", content);
              this.$message.success("任务已经下发！");

              this.redEnvelopeDialog = false;
              this.$refs["redEnvelope"].resetFields();
            })
            .catch(() => {
              // this.$message({
              //   type: 'info',
              //   message: '已取消发送'
              // });
            });
        } else {
          return false;
        }
      });
    },
    // 关闭时清空redForm
    resetRedForm(done) {
      this.$refs["redEnvelope"].resetFields();
      done();
    },
    // 显示转账的dialog
    showTransferMoneyDialog() {
      this.transferMoneyDialog = true;
      this.dialogTilte = "转账";
    },
    // 关闭时清空remittanceForm
    resetRemittanceForm(done) {
      this.$refs["transferMoney"].resetFields();
      done();
    },
    // 转账
    remittanceTask() {
      if (!this.currentWeChatId) {
        this.$message.warning("请选选中微信！");
        return;
      }
      this.$refs["transferMoney"].validate((valid) => {
        if (valid) {
          this.$confirm("确认转账?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              let wechatId = this.currentFriend.WeChatId;
              let friendId = this.currentFriend.FriendId;
              let content = {
                WeChatId: wechatId, // 微信唯一Id
                FriendId: friendId, // 聊天好友微信唯一id
                Money: this.remittanceForm.money, // 钱数，单位：分
                Passwd: this.remittanceForm.password, // 密码，6位，纯数字
                Memo: this.remittanceForm.memo, // 留言
              };
              this.$store.dispatch("websocket/RemittanceTask", content);
              this.$message.success("任务已经下发！");
              this.transferMoneyDialog = false;
              this.$refs["transferMoney"].resetFields();
            })
            .catch(() => {
              this.$message.info("取消转账!");
            });
        } else {
          return false;
        }
      });
    },
    // 展示朋友圈
    showFriendCircle() {
      if (JSON.stringify(this.currentFriend) === "{}") {
        this.$message.warning("请先选择好友!");
        return;
      } else if (!this.currentFriend.FriendId) {
        this.$message.warning("群没有朋友圈!");
        return;
      }
      this.circleDrawerVisiable = true;
    },
    // 展示小程序对话框
    showWeAppDialog() {
      this.wechatAppDialog = true;
      this.dialogTilte = "发小程序";
    },
    // 展示链接对话框
    showLinkDialog() {
      this.linkDialog = true;
      this.dialogTilte = "发链接";
    },
    // 发小程序
    sendWeApp(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //   alert('submit!');
          let time = new Date().getTime();
          let content = {
            WeChatId: this.currentWeChatId, // 所属微信号
            FriendId:
              this.currentFriend.FriendId || this.currentFriend.UserName, // 发送给那个好友
            ContentType: "WeApp", // 发送消息类型 Text Picture Voice Video Link File NameCard
            Content: JSON.stringify(this.weapp), // 发送消息内容 文本，文件url，链接json，名片wxid
            Remark: "", // 其他备注信息，群聊@别人
            MsgId: time * 10000 + parseInt(Math.random() * 10000), // 发送给手机端的时候需要赋值，用于TalkToFriendTaskResultNotice中
          };
          let msg = { MsgType: "TalkToFriendTask", Content: content };
          this.$store.dispatch("websocket/TalkToFriendTask", content);
          this.$message.success("任务已经下发！");
          this.wechatAppDialog = false;
          this.$refs[formName].resetFields();
        } else {
          return false;
        }
      });
    },
    // 发链接
    sendLink(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //   alert('submit!');
          let time = new Date().getTime();
          let content = {
            WeChatId: this.currentWeChatId, // 所属微信号
            FriendId:
              this.currentFriend.FriendId || this.currentFriend.UserName, // 发送给那个好友
            ContentType: "Link", // 发送消息类型 Text Picture Voice Video Link File NameCard
            Content: JSON.stringify(this.linkForm), // 发送消息内容 文本，文件url，链接json，名片wxid
            Remark: "", // 其他备注信息，群聊@别人
            MsgId: time * 10000 + parseInt(Math.random() * 10000), // 发送给手机端的时候需要赋值，用于TalkToFriendTaskResultNotice中
          };
          let msg = { MsgType: "TalkToFriendTask", Content: content };
          this.$store.dispatch("websocket/TalkToFriendTask", content);
          this.$message.success("任务已经下发！");
          this.wechatAppDialog = false;
          this.$refs[formName].resetFields();
        } else {
          return false;
        }
      });
    },
    // 选择小程序
    choseWeApp() {
      this.$message("待实现，敬请期待！");
    },
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 显示并获取公众号
    showGH() {
      this.$store.dispatch("websocket/TriggerBizContactPushTask");
      this.ghDialog = true;
      this.dialogTilte = "公众号列表";
    },
    // 查看公众号
    seeGH(row) {
      let friend = {};
      for (const key in row) {
        if (row.hasOwnProperty(key)) {
          friend[key] = row[key];
        }
      }
      if (!row.Avatar) {
        friend.Avatar = row.Icon;
      }
      friend.WeChatId = this.currentWeChatId;
      friend.NickName = row.Nickname;
      friend.FriendId = row.Username;
      friend.isGh = true;
      let currentFriend = {
        wechatId: this.currentWeChatId,
        friend: friend,
      };
      this.$store.commit("conversation/SET_CURRENT_FRIENDS", currentFriend);
      this.ghDialog = false;
    },
    // =====================================================================
    // 获取历史消息
    getHistory() {
      //   let msg = {
      //     MsgType: 'TriggerHistoryMsgPushTask',
      //     Content: {
      //       WeChatId: this.currentWechats.WeChatId,
      //       FriendId: this.currentFriend.FriendId, // 好友id, 置空表示全部好友
      //       StartTime: 0, // 开始同步的消息时间，0表示全部,UTC毫秒
      //       EndTime: 0 // 结束同步的消息时间，0表示到当前时间为止
      //     }
      //   }
      // this.$websocket.sendSock(msg)
    },
    // 获取公众号名片列表
    getBizContact() {
      //   let msg = {
      //     'MsgType': 'TriggerBizContactPushTask',
      //     'Content': { WeChatId: this.currentWechats.WeChatId }
      //   }
    },
    // 自动养号
    autoHit() {
      //   let msg = {
      //     'MsgType': 'WeChatMaintenanceTask',
      //     'Content': {
      //       WeChatId: this.currentWechats.WeChatId,
      //       Actions: [1, 2, 3],
      //       TaskId: new Date().getTime() * 10000 + Math.random(0, 1) + 10000
      //     }
      //   }
      // this.$websocket.sendSock(msg)
    },
  },
  mounted() {
    // this.SetQrCodes()
    // this.SetChatRoomQrCodes()
    let _this = this;
    document.body.onpaste = function (event) {
      let data = event.clipboardData || window.clipboardData;
      let items = data.items;
      //   let fileList = []; //存储文件数据
      if (items && items.length) {
        // 检索剪切板items
        // for (let i = 0; i < items.length; i++) {
        //   fileList.push(items[i].getAsFile());
        // }
        let blob = items[0].getAsFile();
        if (blob) {
          // 上传到后台
          let fd = new FormData();
          fd.append("myfile", blob, "image.png");
          //   fd.append("myfile", blob);
          _this.$store
            .dispatch("UploadFile", fd)
            .then((res) => {
              let content = res.url;
              _this.$store.commit("conversation/SET_CONTENT", content);
              _this.$store.commit("conversation/SET_CONTENT_TYPE", "Picture");
            })
            .catch((err) => {});
        }
      }
    };
  },
};
</script>

<style lang="scss" scoped>
.tool-bar {
  height: 40px;
  min-height: 40px;
  width: 100%;
  position: relative;
  display: flex;
  justify-content: space-between;
  border-top: solid $border-color-base 2px;
  // background-color: $bg-color-nav-title-2;

  .tool-start {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    .tool {
      justify-self: start;
      margin-left: 4px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      .icon,
      .label {
        height: 24px;
        width: 24px;
        min-width: 24px;
        cursor: pointer;
      }
    }

    .remittance-window {
      left: 112px;
    }
  }

  .tool-end {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .tool {
      justify-self: start;
      margin-right: 4px;
      width: 24px;
      min-width: 24px;
      height: 24px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .qr-code-dialog {
    // border: solid red 1px;
    ::v-deep .el-dialog__body {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 500px;
    }
    .created-time {
      margin: 7px auto;
    }
  }
  .task-panel-dialog {
    .task-body-box {
      position: relative;
      height: 100%;
      width: 100%;
      .task-modal {
        left: 0;
        top: 0;
        position: absolute;
        width: 100%;
        height: 100%;
        background: rgba(55, 55, 55, 0.5);
        z-index: 99;
      }
      .task-modify-box {
        position: absolute;
        width: 400px;
        border: 1px solid #ccc;
        padding: 20px;
        z-index: 1000;
        background: #fff;
        left: 50%;
        top: 20px;
        margin-left: -200px;
      }
    }
    ::v-deep .el-dialog__body {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 500px;
    }
  }

  .red-envelope {
    ::v-deep .el-dialog {
      width: 400px;
      .el-dialog__body {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: auto;
      }
    }
    .created-time {
      margin: 7px auto;
    }
  }

  .we-app {
    ::v-deep .el-dialog {
      width: 500px;
      .el-dialog__body {
        display: flex;
        flex-direction: column;
      }
    }
  }

  ::v-deep .gh-dialog {
    height: 100%;
    overflow: hidden;
    .el-dialog {
      height: 70%;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      .el-dialog__body {
        flex: 1 1 auto;
        padding: 0;
        overflow: hidden;
        height: 100%;
      }
    }
  }

  ::v-deep .reply-drawer {
    .rtl {
      max-width: 310px;
    }
    .el-drawer__body {
      width: 310px;
      padding: 0 5px;
    }
  }

  ::v-deep .circle-drawer {
    margin-top: 60px;
    .ttb {
      min-height: 80%;
      padding: 5px;
      width: 50%;
      margin-left: 25%;
      .el-drawer__body {
        height: 100%;
        width: 100%;
        overflow: hidden;
      }
    }
  }
}
.wangwang {
  display: flex;
  margin: 10px 0;
  .wangwnag-lab {
    width: 20%;
    line-height: 30px;
    float: left;
  }
  .wangwnag-input {
    width: 50%;
  }
}
.task-modal-item {
  margin: 10px 0;
}
.flex-box {
  display: flex;
  span {
    flex: 1;
  }
}
.bottom-btn-box {
  text-align: center;
}
.set-circle-other {
  margin: 10px 0;
}
</style>
